 import React from 'react'
 // ===================================================================== Temp
 import Table from '#cpt/temp/Table'
 // ===================================================================== global declare
 const { $fn, $Lazy, $http } = window
 // ===================================================================== Lazy
const Page 		= $Lazy.load(()=>import('#tp/page/page-container'))
const Form 		= $Lazy.hook(()=>import('@antd/form/layout/form'))
const Button 	= $Lazy.load(()=>import('@antd/button'))
const FormItem 	= $Lazy.load(()=>import('#private/component/form/submit-item'))
const Title 	= $Lazy.load(()=>import('#tp/title/title-small'))
const message 	= $Lazy.file(()=>import('@antd/message'))
const $cache 	= $Lazy.file(()=>import('#private/cache-api'))
 // ===================================================================== component
 class Index extends React.Component{
 	state = {
 		expData:[],
		data: []
 	}
 	
 	componentDidMount(){
		this.getSelect()
 	}
 	
	// 获取下拉数据
	getSelect = async () => {
		$cache.then( async f => {
			// 实验号模板
			this.setState({ expData: await f.getCache({ api:'num_template' }) })
		})
	}
	
	// 表格
	cols = [
		{ title: '行号',				dataIndex: 'id', 				width:100 },
		{ title: '条码号', 			dataIndex: 'spec_code', 	...$fn.table.spec_code },
		{ title: '实验号', 			dataIndex: 'exp_no', 		width:150 }
	]
	// 解析条码
	getSpec(data){
		const arr = data.indexOf(',') >= 0 ? data.split(',') : data.split(/[\s\n]/)
		const stack = []
		arr.forEach(v => {
			if(!isNaN(+v) && (v.length === 12 || v.length === 14) ){
				stack.push(v)
			}
		})
		return Array.from(new Set(stack))
	}
	// 生成条码
	onSubmit = ({ lab_number, exp_no, spec }) => {
		if(this.mod){
			const { data } = this.state
			const _data = $fn.copy(data).map( ({ spec_code, exp_no }) => ({ spec_code, exp_no }))
			$http.submit(this,'auto-man/genExpNoForSpecCode',{ param:{ data:_data , lab_number }}).then(data=>{
				message.then(f=>f.success('批量修改成功'))
				this.setState({ data:[] })
			})
		}else{
			const code = this.getSpec(spec)
			this.setState(()=>{
				if($fn.hasArray(code)){
					message.then(f=>f.success('生成成功'))
					return { data: code.map( (spec_code, i) => ({ spec_code, exp_no: exp_no + i , id: i+1 })) }
				}else{
					message.then(f=>f.warning('条码不符合规范，请检查'))
					return { data: [ ]}
				}
			})
		}
	}
	
 	render(){
		const { data, expData, submitLoading } = this.state
 		return (
 			<Page nobc title='批量修改实验号'>
 				<Form onRef={ref=>this.form=ref} dir='x' className='submit-form small-form ex fv s8' onSubmit={this.onSubmit}>
					<div className='fx bcf ptb20'>
						<FormItem tit='实验号模板' name='lab_number'  width={300} type='select' r data={expData} idStr='lab_number' disabled={submitLoading}/>
						<FormItem tit='起始实验号' name='exp_no' r width={300} disabled={submitLoading}/>
					</div>
					<div className='fx ex'>
						<div className='ex mr5 fv'>
							<Title title='条码录入'/>
							<FormItem wrapClassName='ex textarea-full bcf fv' style={{padding:'5px 5px 0'}} p='请输入条码' inputStyle={{height:'100%'}} name='spec' r mode='textarea' disabled={submitLoading}/>
							<div className='fxc bcf ptb5'><Button size='middle' label='生成' onClick={()=>{ this.mod = false; this.form.submit() }} disabled={submitLoading}/></div>
						</div>
						{/* 表格 */}
						<div className='fv ex'>
							<Title title='条码列表' />
							<div className='fv ex bcf' style={{padding:'5px 5px 0'}}>
								{ Table.call(this, { wrapClassName:' ', space:' ', idStr:'id' }) }
							</div>
							<div className='fxc bcf ptb5'><Button size='middle' disabled={!$fn.hasArray(data)} label='确认批量修改' onClick={()=>{ this.mod = true; this.form.submit() }} loading={submitLoading} /></div>
						</div>
					</div>
				</Form>
 			</Page>
 		)
 	}
 }
 
 export default Index